<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过渡</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 800px;
        height: 800px;
        background-color: grey;
      }
      .box2 {
        width: 150px;
        height: 150px;
        background-color: springgreen;
        margin-bottom: 100px;
        margin-left: 0;
        transition: all 2s 2s;
        /* transition-property: width, height; */
        /* transition-property: all; */
        /* transition-duration: 2s; */
        /* transition-delay: 1000ms; */
        /* transition-timing-function: steps(3); */
        /* 
          过渡
            可简写：要求如果写延迟，则两个时间第一个是持续时间，第二个是延迟
              transition: all 2s 2s


            transition-property:指定要执行过渡的属性
              多个属性必须由,隔开
              如果所有属性都需要过渡使用all
            transition-duration:指定过渡时间
              单位s ms
            transition-delay:指定过渡延迟时间
              单位s ms
            transition-timing-function:过渡的时序函数
              linear:匀速
              ease:慢速开始，先加速，后减速（慢快慢）
              ease-in:加速运动（慢速开始）
              ease-out：减速运动（慢速结束）
              ease-in-out：先加速后减速（慢开始，慢结束）
              cubic-bezier()指定时间时序函数
              https://cubic-bezier.com
              steps()分布执行过渡效果
        */
      }
      .box3 {
        width: 150px;
        height: 150px;
        background-color: skyblue;
        transition-property: all;
        transition-duration: 2s;
      }
      .box1:hover div {
        margin-left: 650px;
        /* width: 50px;
        height: 50px; */
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>
